// 弹框
<template>
  <div class="message-box" v-show="hide === true ? true : false">
    <div class="bg-box">
      <i class="el-icon-close" @click="show"></i>
      <p>欢迎来到本网站，请问有什么可以帮您?</p>
      <div class="btn-box">
        <el-button size="small" @click="show">稍后再说</el-button>
        <el-button size="small" @click="toOnline">现在咨询</el-button>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "vueName",
  data() {
    return {
      hide: false,
    };
  },

  methods: {
    show() {
      this.hide = false;
      console.log(this.hide);
    },
    toOnline() {
      let routeUrl = this.$router.resolve({
        path: "/online",
      });
      window.open(routeUrl.href, "_blank");
    },
  },
  created() {
    setTimeout(() => {
      this.hide = true;
    }, 2500);
  },
};
</script>
 
<style scoped lang = "sass">
.message-box
  position: fixed
  top: 50%
  left: 50%
  width: 400px
  height: 175px
  margin-top: -87px
  margin-left: -200px
  .bg-box
    position: absolute
    top: 50%
    left: 50%
    width: 400px
    height: 175px
    margin-top: -87px
    margin-left: -200px
    background: #0085DA url('../assets/qi/inviteBack0.jpg') no-repeat
    i
      position: absolute
      width: 18px
      height: 18px
      color: #fff
      top: 8px
      right: 8px
    p
      color: #fff
      font-size: 13pt
      width: 246px
      height: 46px
      position: absolute
      top: 44px
      right: 26px
    .btn-box
      position: absolute
      bottom: 12px
      right: 12px
      button:first-child
        color: #fff
        background: transparent
        border-radius: 5px
      button:last-child
        color: #0085da
        background: #fff
        border-radius: 5px
</style>